<template>
	<view class="pd24_20">
		<view v-if="isLogin == false" @click="showLoginAct" class="flex alcenter space">
			<view class="flex alcenter">
				<view class="member-face">
					<image class="face" :src="statics.defaultFace"></image>
				</view>
				<view class="ml15">
					<view class="ft16 cl-w">{{$t('text.zwup')}}</view>
					<view class="mt12 ft12 cl-notice">{{$t('text.zwups')}}</view>
				</view>
			</view>
			<text class="iconfont iconicon_arrow_small ft12 cl-notice"></text>
		</view>
		<view v-else class="flex alcenter space">
			<view class="flex alcenter" @click="opsets">
				<view class="member-face">
					<!-- <span style="color: red;">{{avatar}}</span> -->
					<image class="face" :src="avatar"></image>
					<image class="vip-level" :src="userinfo.group_id>1?statics.vipLevelImg[0]:''"></image>
				</view>
				<view class="ml15">
					<view class="ft16 cl-w">{{ userinfo.nickname || '' }}</view>
					<view class="mt12 ft12 cl-notice">ID:{{ userinfo.user_id || '' }}</view>
				</view>
			</view>
			<view class="btn-mini opsetads" @click="opset">
				<image mode="aspectFit" style="width: 100%; height: 100%;" :src="staticUrl + 'sz.png?v=1'">
			</view>
		</view>
		<view style="width: 100%; height: 30upx;"></view>
		<home-vipcard :userinfo="userinfo" :Info='Info' @loginAct="showLoginAct" @qrcode="showQrcode = true"></home-vipcard>
		<!-- <view class="mt24">
			<home-banner :banners="banners"></home-banner>
		</view> -->
		<view class="flex wrap space mt16">
			<view v-for="(item,index) in getMenus" :key="index" :class="index > 1 ? 'mt16': ''">
				<view v-if="item.type == 'link'" :data-index="index" @click="memberLinkTo"
					class="box pd16_15 flex alcenter" style="width: 320rpx;">
					<image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
					<!-- <text class="ml15 ft14 ftw500 cl-w">{{item.name}}</text> -->
					<text class="ml15 ft14 ftw500 cl-w" v-if="item.oiname==0">{{$t('text.name1')}}</text>
					<text class="ml15 ft14 ftw500 cl-w" v-if="item.oiname==2">{{$t('text.name2')}}</text>
					<text class="ml15 ft14 ftw500 cl-w" v-if="item.oiname==3">{{$t('text.name3')}}</text>
					<text class="ml15 ft14 ftw500 cl-w" v-if="item.oiname==4">{{$t('text.name6')}}</text>
					<text class="ml15 ft14 ftw500 cl-w" v-if="item.oiname==5">{{$t('text.name7')}}</text>
					<text class="ml15 ft14 ftw500 cl-w" v-if="item.oiname==6">{{$t('text.name8')}}</text>
					<text class="ml15 ft14 ftw500 cl-w" v-if="item.oiname==7">{{$t('text.name9')}}</text>
				</view>
				<view v-else style="width: 320rpx;">
					<button class="box pd16_15 flex alcenter" :open-type="item.type"
						style="padding: 32rpx 30rpx; margin: 0;">
						<image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
						<text class="ml15 ft14 ftw500 cl-w">{{item.name}}</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 		<navigator open-type="reLaunch" url="/pages/staff/index">
			<view class="box pd16_15 mt16 flex alcenter space">
				<view class="flex alcenter">
					<text class="iconfont iconicon_my_shop cl-main ft24"></text>
					<text class="ml15 ft14 ftw500 cl-main">商户管理入口</text>
				</view>
				<text class="iconfont iconicon_arrow_small cl-notice"></text>
			</view>
		</navigator> -->

		<!-- 		<view class="mt32 flex center alcenter">
			<view class="bd-line" style="width: 120rpx;"></view>
			<view class="ml30 mr30 ft12 cl-notice">推荐小程序</view>
			<view class="bd-line" style="width: 120rpx;"></view>
		</view>
		<view class="mt24 flex alcenter space">
			<view class="flex alcenter">
				<image class="miniapp-icon" style="background: #00C657;"></image>
				<text class="ft14 cl-info2 ml10">小程序A</text>
			</view>
			<view class="flex alcenter">
				<image class="miniapp-icon" style="background: #007AFF;"></image>
				<text class="ft14 cl-info2 ml10">小程序b</text>
			</view>
			
			<navigator url="/pages/client/miniapp">
				<view class="flex alcenter">
					<text class="ft24 iconfont iconicon_more cl-notice"></text>
					<text class="ft14 cl-info2 ml10">更多</text>
				</view>
			</navigator>
		</view> -->
		<view style="height: 100rpx;"></view>
		<!-- <customTabbar :activeIndex="activeIndex" /> -->
		<com-copyright></com-copyright>

		<!-- <com-footer model="member"></com-footer> -->

		<dialog-birthday v-if="showBirthday" @closed="showBirthday = false"></dialog-birthday>
		<dialog-login v-if="showLogin" @loginYes="loginYes" @closed="showLogin = false"></dialog-login>
		<dialog-qrcode v-if="showQrcode" @closed="showQrcode = false"></dialog-qrcode>
	</view>
</template>

<script>
	import {
		nextTick
	} from "vue";

	// import customTabbar from '@/components/customTabBar/index.vue';
	export default {
		components: {
			// customTabbar
		},
		data() {
			return {
				isLogin: false,
				showLogin: false,
				isBirthday: true,
				showBirthday: false,
				showQrcode: false,
				avatar: '',
				cdnUrl: 'https://rls.rollingshort.net/uploads',
				userinfo: [],
				banners: [],
				vipLevel: 0,
				iskq: 0,
				uid: 0,
				navLock: false,
				staticUrl: this.$config.staticUrl,
				memberMenus: [{
						name: this.$t('text.name1'),
						oiname: 0,
						type: 'link',
						model: '',
						link: '/pages/client/tuan/zjgk',
						icon: '/static/img/my/vipcard_icon_my_card@2x.png',
						show: 1
					},
					{
						name: this.$t('text.name2'),
						type: 'link',
						model: '',
						oiname: 2,
						link: '/pages/client/tuan/zjjl',
						icon: '/static/img/my/vipcard_icon_my_order@2x.png',
						show: 1
					},
					{
						name: this.$t('text.name3'),
						type: 'link',
						model: '',
						oiname: 3,
						link: '/pages/client/tuan/wdxh',
						icon: '/static/img/my/vipcard_love.png?v=1',
						show: 1
					},
					{
						name: this.$t('text.name4'),
						type: 'link',
						model: '',
						oiname: 9,
						link: '/pages/client/member/address',
						icon: this.$config.staticUrl + 'vipcard_icon_my_address@2x.png',
						show: 0
					},
					{
						name: this.$t('text.name5'),
						type: 'link',
						model: '',
						oiname: 8,
						link: '/pages/client/shop',
						icon: this.$config.staticUrl + 'vipcard_icon_my_integral@2x.png',
						show: 0
					},
					// {name:'联系客服',type:'link',model:'',link:'/pages/client/vipcard/adviser',icon:this.$config.staticUrl + 'vipcard_icon_my_advise@2x.png',show:1},
					{
						name: this.$t('text.name6'),
						type: 'link',
						model: '',
						oiname: 4,
						link: '/pages/client/feedback/list',
						icon: '/static/img/my/vipcard_icon_my_advise@2x.png',
						show: 1
					},
					{
						name: this.$t('text.name7'),
						type: 'link',
						model: '',
						oiname: 5,
						link: '/pages/client/mytuandui',
						icon: '/static/img/my/vipcard_icon_my_invite@2x.png',
						show: 3
					},
					// {
					// 	name: this.$t('text.name8'),
					// 	type: 'link',
					// 	model: '',
					// 	oiname:6,
					// 	link: '/pages/client/vipcard/fxlog',
					// 	icon: this.$config.staticUrl + 'vipcard_icon_my_integral@2x.png',
					// 	show: 3
					// },
					// {name:'创作者入驻',type:'link',model:'',link:'/pages/creator/home/index',icon:'/static/img/my/vipcard_icon_my_creat@2x.png',show:1},
					{
						name: this.$t('text.name9'),
						type: 'link',
						model: '',
						oiname: 7,
						link: '/pages/creator/certification/one/one',
						icon: '/static/img/my/vipcard_icon_my_creat@2x.png',
						show: 1
					},
				],
				activeIndex: 3,
				Info: {}
			}
		},
		computed: {
			getMenus() {
				let arr = new Array;
				for (var a in this.memberMenus) {
					if (this.memberMenus[a].show == 1 || (this.iskq == 1 && this.memberMenus[a].show == 3)) {
						arr.push(this.memberMenus[a]);
					}
				}
				return arr;
			}
		},
		onLoad() {
			// let [err, res] =  this.$httpas.get('/api/hyk/hyk_info');
			// console.log('res',res,err);
			
			if (uni.getStorageSync("userinfo")) {
				this.uid = uni.getStorageSync("userinfo").id
			}
			if (uni.getStorageSync("Info")) {
				this.Info = uni.getStorageSync("Info")
				console.log(this.Info,'this.Info');
				// console.log('this.Infothis.Infothis.Info',this.Info);
			}
		},
		onShow() {
			this.showLogin = false
			if (uni.getStorageSync("userinfo").token) {
				this.isLogin = true;
				this.ongrzlTap();

			} else {
				this.isLogin = false;
				this.userinfo = []
			}
			this.banners = uni.getStorageSync("config").banner
			this.getList();
		},
		onShareAppMessage: function(res) {
			// #ifdef MP-WEIXIN
			var href = '/pages/login/login?fxpid=' + this.uid
			console.log(res)
			let that = this;
			const obj = {
				title: this.$t('user.grid.invite'),
				imageUrl: '',
				path: href,
				success: function(res) {
					console.log(res, "转发成功")
				},
				fail: function(res) {
					wx.showToast({
						title: '发送失败',
						icon: 'none'
					})
				}
			}
			return obj
			// #endif
		},
		onShareTimeline(e) {

		},
		methods: {
		
			opset() {
				uni.navigateTo({
					url: '/pages/set/set'
				})
			},
			opsets() {
				uni.navigateTo({
					url: '/pages/set/grzl/grzl'
				})
			},
			async ongrzlTap() {
				let data = {};
				data.token = uni.getStorageSync("userinfo").token;
				data.uid = uni.getStorageSync("userinfo").id;
				uni.request({
					url: this.configs.webUrl + '/api/user/index',
					data: data,
					success: res => {
						if (res.data.code == 1) {
							let ionfo = res.data.data
							ionfo.isLogin = true
							this.userinfo = ionfo
							this.iskq = this.userinfo.config.iskq
							uni.setStorage({ //缓存配置信息
								key: 'userinfo',
								data: res.data.data
							})
							if (res.data.data.avatar) {
								var str = res.data.data.avatar;
								if (str.indexOf("data:image") != -1) {
									this.avatar = '';
								} else {
									if (str.indexOf("http") != -1) {
										this.avatar = res.data.data.avatar;
									} else {
										this.avatar = this.configs.imgUrl + res.data.data.avatar;
										console.log('this.avatar', this.avatar);
									}
								}
							} else {
								this.avatar = '';
							}
							uni.setStorage({ //缓存配置信息
								key: 'avatar',
								data: this.avatar
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							});
						}
					},
					fail: (data, code) => {
						//console.log('fail' + JSON.stringify(data));
					}
				});
			},
			getList() {
				let data = {};
				var limit = 15;
				data.limit = limit
				data.ishot = 2
				uni.request({
					url: this.configs.webUrl + '/api/video/lists',
					data: data,
					success: data => {
						//console.log(data.data)
						uni.setStorage({ //缓存配置信息
							key: 'config',
							data: data.data.config
						})
						if (uni.getStorageSync("config").iskq) {
							this.iskq = uni.getStorageSync("config").iskq;
						}
					},
					fail: (data, code) => {}
				});
			},
			async ruzhu_status() {
				let [err, res] = await this.$httpas.post('/api/creator/ruzhu_status', {}, {
					'token': true
				});
				if (!this.$httpas.errorCheck(err, res)) return;

				if (res.data.data == 0) {
					uni.navigateTo({
						url: '/pages/creator/certification/two/two'
					})
				}
				if (res.data.data == -1) {
					uni.navigateTo({
						url: '/pages/creator/certification/one/one'
					})
				}
				if (res.data.data == 1) {
					uni.navigateTo({
						url: '/pages/creator/home/index'
					})
				}
			},
			memberLinkTo(e) {
				let index = parseInt(e.currentTarget.dataset.index);
				if (this.isLogin == false && this.getMenus[index].model != 'integral') {
					this.showLogin = true;
				} else {
					if (this.getMenus[index].name == this.$t('text.name9')) {
						this.ruzhu_status()
						return 1
					}


					if (this.getMenus[index].link != '') {
						if (this.getMenus[index].model == 'integral') {
							uni.redirectTo({
								url: this.getMenus[index].link
							})
						} else {
							uni.navigateTo({
								url: this.getMenus[index].link
							})
						}
					}
				}
			},
			birthdayAct() {
				if (this.isBirthday) {
					uni.navigateTo({
						url: '/pages/client/member/birthday'
					})
				} else {
					uni.navigateTo({
						url: '/pages/client/member/info'
					})
				}
			},
			showLoginAct() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			loginYes() {

			},
			outlogin() {
				uni.showModal({
					content: this.$t('modal.content.logout'),
					success: (e) => {
						if (e.confirm) {
							uni.clearStorageSync();

							setTimeout(() => {
								this.isLogin = false;
								this.userinfo.isLogin = false
							}, 200)
						}
					}
				});
			}
		}
	}
</script>

<style>
	.opsetads {
		background: none;
		color: #000000;
		width: 70upx;
		line-height: 70upx;
		height: 70upx;
		text-align: center;
		border-radius: 100%;
		animation: rotate 10s linear infinite;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg) skew(0deg) scale(1);
			-ms-transform: rotate(0deg) skew(0deg) scale(1);
			/* IE 9 */
			-moz-transform: rotate(0deg) skew(0deg) scale(1);
			/* Firefox */
			-webkit-transform: rotate(0deg) skew(0deg) scale(1);
			/* Safari  Chrome */
			-o-transform: rotate(0deg) skew(0deg) scale(1);
		}

		100% {
			transform: rotate(360deg) skew(0deg) scale(1);
			-ms-transform: rotate(360deg) skew(0deg) scale(1);
			/* IE 9 */
			-moz-transform: rotate(360deg) skew(0deg) scale(1);
			/* Firefox */
			-webkit-transform: rotate(360deg) skew(0deg) scale(1);
			/* Safari  Chrome */
			-o-transform: rotate(360deg) skew(0deg) scale(1);
		}
	}

	.member-face {
		position: relative;
	}

	.member-face .vip-level {
		height: 48rpx;
		width: 48rpx;
		position: absolute;
		left: calc(50% - 24rpx);
		top: -30rpx;
	}

	.member-face .face {
		width: 160rpx;
		height: 160rpx;
		border: 6rpx solid #1f1f1f;
		background: #000;
		border-radius: 100rpx;
		box-shadow: 0rpx 24rpx 24rpx 0rpx #1f1f1f;
	}

	.miniapp-icon {
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		background: #F2F2F2;
	}

	.box {
		background: #1f1f1f;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 32rpx;
	}
</style>